<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import { getMarketOverview, getMonthEndStatistics, getCumulativeSale, getPreSale, getSaleRecord } from '../api'

const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const monthExchangeChartRef = ref(null)
const finalTotalChartRef = ref(null)

const getMonthChartOption = (data) =>{
  return {
    // title: {
    //   text: `当月商品房和存量房成交量`,
    //   textStyle: {
    //     color: '#565757',
    //     fontSize: 15,
    //   },
    // },
    grid: {
      top: '20%',
      left: '12%',
      bottom: '13%',
      right: '16%',
    },
    legend: {
      show: true,
      right: 'center',
      itemWidth: 6,
      itemHeight: 6,
      width: '100%',
      textStyle: {
        color: '#b4d3ed',
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}', // + '({a.includes('面积') ? 平 : 套)',
    },
    xAxis: {
      data: data.xAxis, // ['江南区', '良庆区', '青秀区', '西乡塘区', '兴宁区', '邕宁区'],
      axisLabel: {
        showMaxLabel: true,
        textStyle: {
          color: '#ffffff',
          fontSize: 9,
        },
        padding: [3, 0, 0, 0],
        rotate: -60,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgb(64,77,93)',
          width: 1,
        },
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: 'rgb(64,77,93)',
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        name: '成交量/套',
        type: 'value',
        position: 'left',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
      },
      {
        name: '成交面积/平',
        type: 'value',
        position: 'right',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
          // margin: 20, // 增加标签与轴的距离
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
        offset: 10, // 向右偏移确保数字显示完整
      },
    ],
    series: [
      {
        name: '商品房成交量',
        type: 'bar',
        // barWidth: 10,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'outside', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        yAxisIndex: 0,
        itemStyle: {
          color: '#0fadfb',
        },
        data: data['商品房成交量'], // [310,400,380,180,220,360],
      },
      {
        name: '存量房成交量',
        type: 'bar',
        // barWidth: 10,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'inside', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        yAxisIndex: 0,
        itemStyle: {
          color: '#bffe34',
        },
        data: data['存量房成交量'], //[40,70,100,40,40,40],
      },
      {
        name: '商品房成交面积',
        type: 'line',
        smooth: true,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'top', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        itemStyle: {
          color: '#fe9307',
        },
        yAxisIndex: 1,
        data: data['商品房成交面积'], //[12040,18070,38100,6040,9040,5040],
      },
      {
        name: '存量房成交面积',
        type: 'line',
        smooth: true,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'top', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        itemStyle: {
          color: '#00ff00',
        },
        yAxisIndex: 1,
        data: data['存量房成交面积'], // [2040,3070,8100,4040,4040,4040],
      },
    ],
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c89' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c21' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  }
}

const getFinalTotalChartOption = (data) =>{
  // 批准预售月末统计 / 商品住房累计可售
  return {
    grid: {
      top: '20%',
      left: '12%',
      bottom: '13%',
      right: '16%',
    },
    legend: {
      show: true,
      right: 'center',
      itemWidth: 6,
      itemHeight: 6,
      // width: '100%',
      textStyle: {
        color: '#b4d3ed',
        fontSize: 12,
      },
    },
    xAxis: {
      data: data.xAxis,
      axisLabel: {
        showMaxLabel: true,
        textStyle: {
          color: '#ffffff',
          fontSize: 9,
        },
        rotate: -45,
        padding: [3, 0, 0, 0],
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgb(64,77,93)',
          width: 1,
        },
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: 'rgb(64,77,93)',
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        name: '可售套数',
        type: 'value',
        position: 'left',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: true,
        },
      },
      {
        name: '可售面积/平方',
        type: 'value',
        position: 'right',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
          // margin: 20, // 增加标签与轴的距离
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
        offset: 10, // 向右偏移确保数字显示完整
      },
    ],
    series: [
      {
        name: '可售套数',
        type: 'bar',
        barWidth: 10,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'outside', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        yAxisIndex: 0,
        itemStyle: {
          // color: '#24d4b8',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#3df389' // 0% 处的颜色
            }, {
                offset: 1, color: '#0cb6e7' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        data: data['可售套数'],
      },
      {
        name: '可售面积/平方',
        type: 'line',
        smooth: true,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'top', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        itemStyle: {
          color: '#ffff00',
        },
        yAxisIndex: 1,
        data: data['可售面积'],
      }
    ],
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c89' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c21' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  }
}

const monthEndStatistics = ref({})
const cumulativeSale = ref({})
const activeName_2 = ref('prevSell')

const handleChangeTab_2 = (activeName) => {
  activeName_2.value = activeName
  const data = activeName == 'prevSell' ? monthEndStatistics.value : cumulativeSale.value
  finalTotalChartRef.value?.updateOption(getFinalTotalChartOption(data))
}

const updateChartMarketOverview = (data) => {
  monthExchangeChartRef.value?.updateOption(getMonthChartOption(data))
}

const preSale = ref([])
const saleRecord = ref([])
const activeName_3 = ref('prevSell')
const tableData = ref([])
const updateTableData = (activeName) => {
  tableData.value = activeName == 'prevSell' ? preSale.value : saleRecord.value
  console.log('tableData', tableData.value)
}
const handleChangeTab_3 = (activeName) => {
  activeName_3.value = activeName
  updateTableData(activeName)
}

const reqData = () => {
  Promise.all([
    getMarketOverview(), getMonthEndStatistics(), getCumulativeSale(), getPreSale(), getSaleRecord()
  ])
  .then(([marketOverviewRes, monthEndStatisticsRes, cumulativeSaleRes, preSaleRes, saleRecordRes]) => {
    if (marketOverviewRes.success) {
      updateChartMarketOverview(marketOverviewRes.data)
    }
    if (monthEndStatisticsRes.success) {
      monthEndStatistics.value = monthEndStatisticsRes.data
      handleChangeTab_2('prevSell')
    }
    if (cumulativeSaleRes.success) {
      cumulativeSale.value = cumulativeSaleRes.data
    }
    if (preSaleRes.success) {
      preSale.value = preSaleRes.data
      handleChangeTab_3('prevSell')
    }
    if (saleRecordRes.success) {
      saleRecord.value = saleRecordRes.data
    }
  })
}

onMounted(() => {
  reqData()
})

onUnmounted(() => {})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="交易总览" class="exchange-overview">
      <div class="total-buildings">
        <div class="my-tabs">
          <div class="before dots">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
          <div class="tabs">
            <div class="tab-item on">当月商品房和存量房成交量</div>
          </div>
          <div class="after dots">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="chart">
          <draw-echarts
            ref="monthExchangeChartRef"
            width="420"
            height="280"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>
      <div class="total-area">
        <div class="my-tabs">
          <div class="before dots">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
          <div class="tabs">
            <div class="tab-item" :class="{ on: activeName_2 == 'prevSell' }" @click="handleChangeTab_2('prevSell')">批准预售月末统计</div>
            <div class="tab-item" :class="{ on: activeName_2 == 'totalSell' }" @click="handleChangeTab_2('totalSell')">商品住房累计可售</div>
          </div>
          <div class="after dots">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="chart">
          <draw-echarts
            ref="finalTotalChartRef"
            width="420"
            height="280"
            :options="{}"
          ></draw-echarts>
        </div>
      </div>
      <div class="ss">
        <div class="my-tabs">
          <div class="before dots">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
          <div class="tabs">
            <div class="tab-item" :class="{ on: activeName_3 == 'prevSell' }" @click="handleChangeTab_3('prevSell')">批准预售信息</div>
            <div class="tab-item" :class="{ on: activeName_3 == 'totalSell' }" @click="handleChangeTab_3('totalSell')">现售备案信息</div>
          </div>
          <div class="after dots">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="table-wrap">
          <div class="table-prev-sell" v-if="activeName_3 == 'prevSell'">
            <el-scrollbar style="height: 200px;">
              <div class="tr th">
                <div class="no td">预售证号</div>
                <div class="name td">项目名称</div>
                <div class="time td">批准时间</div>
              </div>
              <div class="tr" v-for="(item, index) in tableData" :key="index">
                <div class="no td">
                  <el-tooltip :content="item.licenseNo"  placement="top" effect="light">
                    {{ item.licenseNo }}
                  </el-tooltip>
                </div>
                <div class="name td">
                  <el-tooltip :content="item.projectName"  placement="top" effect="light">
                    {{ item.projectName }}
                  </el-tooltip>
                </div>
                <div class="time td">
                  <el-tooltip :content="item.approvalDate"  placement="top" effect="light">
                    {{ item.approvalDate }}
                  </el-tooltip>
                </div>
              </div>

              <div class="no-data" v-if="!tableData.length">暂无数据</div>
            </el-scrollbar>
          </div>
          <div class="table-prev-sell" v-else>
            <el-scrollbar style="height: 200px;">
              <div class="tr th">
                <div class="no td">备案编号</div>
                <div class="name td">项目名称</div>
                <div class="time td">备案时间</div>
                <div class="time td">备案面积(㎡)</div>
              </div>
              <div class="tr" v-for="(item, index) in tableData" :key="index">
                <div class="no td">
                  <el-tooltip :content="item.licenseNo"  placement="top" effect="light">
                    {{ item.licenseNo }}
                  </el-tooltip>
                </div>
                <div class="name td">
                  <el-tooltip :content="item.projectName"  placement="top" effect="light">
                    {{ item.projectName }}
                  </el-tooltip>
                </div>
                <div class="time td">
                  <el-tooltip :content="item.approvalDate"  placement="top" effect="light">
                    {{ item.approvalDate }}
                  </el-tooltip>
                </div>
                <div class="area td">
                  <el-tooltip :content="String(item.recordArea)"  placement="top" effect="light">
                    {{ item.recordArea }}
                  </el-tooltip>
                </div>
              </div>

              <div class="no-data" v-if="!tableData.length">暂无数据</div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }
  .single-line {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-break: break-all;
  }

  .exchange-overview {
    height: 900px;
      // background: linear-gradient(90deg, #072f59 0%, #08062f 100%);
    .my-tabs {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #bbdbf6;
      height: 32px;
      line-height: 32px;
      margin-bottom: 10px;

      .dots {
        display: flex;
        align-items: center;
        gap: 5px;
        i {
          display: inline-block;
          width: 3px;
          height: 3px;
          border-radius: 3px;
          background: #bbdbf6;
        }
      }

      .tabs {
        display: flex;
      }

      .tab-item {
        position: relative;
        cursor: pointer;
        padding: 0 6px;
        margin: 0 6px;
        font-size: 13px;
      }
      .tab-item::before {
        content: '';
        position: absolute;
        width: 2px;
        height: 0.7em;
        right: -7px;
        top: 12px;
        background-color: #ffffff;
      }
      .tab-item:last-child::before {
        display: none;
      }
      .tab-item.on {
        color: #f8ea9a;
      }
      .tab-item.on::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,rgba(248, 234, 154, 0.01), rgba(248, 234, 154, 0.4), rgba(248, 234, 154, 0.01));
      }
    }

    .table-wrap {
      color: #ffffff;
      
      .tr {
        display: flex;
        height: 32px;
        line-height: 32px;
        .td {
          flex: 2;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          word-break: break-all;
          padding: 0 4px;
        }
        .no {
          flex: 3;
        }
      }
      .th {
        color: #bbdbf6;
      }
      .tr:nth-child(odd) {
        background-color: #1c2d4c;
      }
      .tr:nth-child(even) {
        background-color: #08142d;
      }

      .no-data {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 3;
        color: #B9D9F4;
      }
    }
  }
}
</style>
